<!-- Created by henian.xu on 2018/8/24. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <Divider label="3 列"/>
            <div class="pa-a">
                <GridGroup
                    :columns="3"
                >
                    <Grid
                        v-for="index in 9"
                        :key="index"
                        icon="&#xf01c;"
                        :label="`Grid ${index}`"
                    />
                </GridGroup>
            </div>
            <Divider label="4 列"/>
            <div class="pa-a">
                <GridGroup
                    :columns="4"
                >
                    <Grid
                        v-for="index in 16"
                        :key="index"
                        icon="&#xf01c;"
                        :label="`Grid ${index}`"
                    />
                </GridGroup>
            </div>
            <Divider label="有边框"/>
            <div class="pa-a">
                <GridGroup
                    :columns="4"
                    border
                >
                    <Grid
                        v-for="index in 9"
                        :key="index"
                        icon="&#xf01c;"
                        :label="`Grid ${index}`"
                        :span="((index-1)%4)?0:2"
                    />
                </GridGroup>
            </div>
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'GridGroupPage',
    mixins: [pageMixin],
    data() {
        return {};
    },
    methods: {
        onBtnClick(e) {
            console.log('onBtnClick', e);
        },
    },
};
</script>

<style lang="scss">
</style>
